<template>
    <div :ref="cardRef" :style="{position:cardPosition,zIndex:cardZIndex}" class="el-card" :class="cardClass" @dblclick="doCancelTraction">
      <div class="el-card__header" v-if="$slots.header || header">
        <svg-icon v-if="icon" style="font-size: 20px;margin-left: -8px;margin-right: 8px" icon-class="line" />
        <slot name="header">
          {{ header }}
        </slot>
      </div>
      <div class="el-card__body" style="position: relative" :style="bodyStyle">
        <slot></slot>
      </div>
      <div v-drag="{tractionStatus,vm:this}" v-if="traction" :style="{width:dragDivWidth}" style="position:absolute;bottom:0;height:4px;padding: 1px 0px;">
        <svg-icon v-if="traction" class="card-traction" @click="doTraction" :icon-class="move" />
      </div>
    </div>
</template>1

<script>

  let uid = 0

  export default {
    name: 'ElCard',
    props: {
      header: {},
      bodyStyle: {},
      shadow: {
        type: String,
        default:'never'
      },
      icon:{
        type:Boolean,
        default:true
      },
      traction:{
        type:Boolean,
        default:false
      },
    },
    data(){
      return {
        currShadow:this.shadow,
        tractionStatus:false,
        dragDivWidth:'',
        dragDivHeight:'',
        contentHeightStand:0,
        cardZIndex:0,
        cardPosition:'relative',
      }
    },
    computed:{
      cardClass(){
        return ` is-${this.currShadow}-shadow`
      },
      cardRef(){
        return `card_${this.uid}`
      },
      move(){
        return this.tractionStatus?'caret-down-small':'caret-up-small'
      }
    },
    methods:{
      doTraction(){
        if(this.tractionStatus)return
        this.tractionStatus = true
        const dom = this.$el
        this.backDom = dom.cloneNode(true)
        dom.parentNode.insertBefore(this.backDom,dom.nextSibling)
        this.cardPosition = 'absolute'
        this.cardZIndex = '1001'
        this.currShadow = 'always'
      },
      doCancelTraction(){
        if(!this.tractionStatus)return
        this.tractionStatus = false
        const dom = this.$el
        dom.parentNode.removeChild(this.backDom)
        dom.style.height = this.dragDivHeight
        this.cardPosition = 'relative'
        this.cardZIndex = '0'
        this.currShadow = 'never'
        this.$emit('doChangeHeight',0)
      }
    },
    mounted() {
      this.uid = uid++
      if(this.traction){
        const info = this.$el.getBoundingClientRect()
        this.dragDivWidth = `${info.width/this.$scale()}px`
        this.dragDivHeight = this.$el.style.height?this.$el.style.height:`${(info.height-1)/this.$scale()}px`
      }
      this.$watch(()=>{
        return `${this.$store.state.business.isVMenuCollapse}_${this.$store.state.business.isSetFullScreen}`
      },()=>{
        const info = this.$el.getBoundingClientRect()
        this.dragDivWidth = `${info.width/this.$scale()}px`
      })
    }
  };
</script>
